<template>
    <qly-base-page ref="skyBasePageRef" type="data"
                   bg-page-color="#f5f5f5" padding="0">
        <template #navbar>
            <qly-nav-bar :title="$t('common.salary')">
                <template #right>
                    <uni-icons type="search" size="28" @click="openSearch"/>
                </template>
            </qly-nav-bar>
        </template>
        <template #header>
            <month-card/>
        </template>
        <tr-search ref="searchRef" v-model="params" :search-params="searchParams" @search="search"/>
        
        <view>
            <tr-card v-for="(item,index) in 10" :key="index" margin="12rpx 18rpx" borderRadius="12rpx"
                     @tap="toSalaryInfo">
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.date')}}：</view>
                        <view class="value">2025-05-05</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{$t('common.Total')}}：</view>
                        <view class="value">12</view>
                    </view>
                </view>
                <up-gap height="1" bgColor="#f5f5f5" marginTop="12rpx" marginBottom="12rpx"></up-gap>
                
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.groupSalary')}}：</view>
                        <view class="value">12</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{$t('common.valuateRewards')}}：</view>
                        <view class="value">123</view>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.advanceFunds')}}：</view>
                        <view class="value">12</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{$t('common.balance')}}：</view>
                        <view class="value">123</view>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.invoiceAdvance')}}：</view>
                        <view class="value">12</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{$t('common.amountReceived')}}：</view>
                        <view class="value">123</view>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.additionalSubsidies')}}：</view>
                        <view class="value">12</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{$t('common.collectCustomerCommissions')}}：</view>
                        <view class="value">12</view>
                    </view>
                </view>
                <up-gap height="1" bgColor="#f5f5f5" marginTop="12rpx" marginBottom="12rpx"></up-gap>
                <view class="tr-btns-box row-end">
                    <view>
                        <up-tag :text="$t('common.requestPayment')" size="large" plain></up-tag>
                    </view>
                </view>
            </tr-card>
        </view>
    </qly-base-page>
</template>
<script setup>
import monthCard from './components/monthCard.vue'


const searchRef = ref()
const params = ref({
    status: '',
    myPublishFlag: true,
    type: 1
})
const searchParams = [
    {
        prop: 'phone',
        label: '评价日期',
        type: 'daterange',
    },
]

const openSearch = () => {
    searchRef.value.open()
}

const search = () => {
    console.log('search', params.value)
}

// 工资明细
const toSalaryInfo = () => {
    qly.page.open('/pages/my/salary/info')
}
</script>
<style scoped lang="scss">
</style>
